<template>
	<xbd-pages-content title="健康小屋">
		<template #content>
			<view class="health-hut" :style="'minHeight:'+windowHeight+'px'">
				<view class="top-card" @click="clickRight('date')">
					<image class="image" src="../../static/images/date4.svg" mode="" ></image>
					<text class="text">下次体检时间：{{ newDate === 0 ? '--' :  timeFormat(newDate, 'YYYY-MM-DD') }}</text>
					<image class="right" src="../../static/images/right.svg" mode=""></image>
				</view>
				<view class="content">
					<view class="">
						体检档案
					</view>
					<view class="box" @click="clickRight('weight')">
						<image class="image" src="../../static/images/health/health1.png" mode=""></image>
						<text class="text">身高体重</text>
						<image class="right" src="../../static/images/health/right.svg" mode=""></image>
					</view>
					<view class="box" @click="clickRight('temperature')">
						<image class="image" src="../../static/images/health/health3.png" mode=""></image>
						<text class="text">体温检测</text>
						<image class="right" src="../../static/images/health/right.svg" mode=""></image>
					</view>
					<view class="box" @click="clickRight('press')">
						<image class="image" src="../../static/images/health/health2.png" mode=""></image>
						<text class="text">血压检测</text>
						<image class="right" src="../../static/images/health/right.svg" mode=""></image>
					</view>
					<view class="box" @click="clickRight('oxygen')">
						<image class="image" src="../../static/images/health/health5.png" mode=""></image>
						<text class="text">血氧检测</text>
						<image class="right" src="../../static/images/health/right.svg" mode=""></image>
					</view>
					<view class="box" @click="clickRight('fat')">
						<image class="image" src="../../static/images/health/health4.png" mode=""></image>
						<text class="text">体脂检测</text>
						<image class="right" src="../../static/images/health/right.svg" mode=""></image>
					</view>
					<view class="box" @click="clickRight('heart')">
						<image class="image" src="../../static/images/health/health6.png" mode=""></image>
						<text class="text">心理健康</text>
						<image class="right" src="../../static/images/health/right.svg" mode=""></image>
					</view>
					<view class="box" @click="clickRight('TCM')">
						<image class="image" src="../../static/images/health/health7.png" mode=""></image>
						<text class="text">中医体质辨识</text>
						<image class="right" src="../../static/images/health/right.svg" mode=""></image>
					</view>
					<view class="msg">
						<view class="title">
							体检须知
						</view>
						<view class="center">
							1.如果您有高血压、冠心病等慢性病，请您体检当日少量饮水（ ＜ 100ml），少量饮水不会影响您的体检结果。
							<br>
							2.体检前3~5天，请您清淡饮食，禁酒；限制高脂肪、高蛋白、高糖饮食。注意休息，避免剧烈运动、情绪激动。
						</view>
					</view>
				</view>
					
				</view>
			</view>
		</template>
	</xbd-pages-content>
</template>

<script>
	import { Health } from '@/api/index.js';
	var dayjs = require('dayjs');
	export default {
		data(){
			return{
				type:'never',
				oldDate:0,
				newDate:0,
				windowHeight:0,
			}
		},
			
		methods:{
			timeFormat(date, format) {
				return dayjs(date).format(format);
			},
			clickRight(type){
				let url = '';
				switch(type) {
					case 'date':
						url = `./date?type=${this.type}`;
						break;
					case 'weight':
						url = `./analysis?type=${type}`;
						break;
					case 'temperature':
						url = `./analysis?type=${type}`;
						break;
					case 'press':
						url = `./analysis?type=${type}`;
						break;
					case 'oxygen':
						url = `./analysis?type=${type}`;
						break;
					case 'fat':
						url = `./analysis?type=${type}`;
						break;
					case 'heart':
						url = `./details?title=心理健康`;
						break;
					case 'TCM':
						url = `./details?title=中医体质辨识`;
						break;
				}
				uni.navigateTo({
					url,
				});
			},
			// 初始化数据
			async init() {
				const list = [
					Health.getOldDate(),
					Health.getFrequency(),
				]
				this.$showLoading('加载中');
				Promise.all(list).then( res =>{
					uni.hideLoading();
					
					// 上次体检时间
					if(res[0].data.time){
						this.oldDate = +dayjs(res[0].data.time )
					// 频率
					this.type = res[1].data.type
					if(res[1].data.type === 'never' ){
						this.newDate = 0
					}else if(res[1].data.type === 'month' ){
						this.newDate = +this.oldDate + 2592000000
					}else if(res[1].data.type === 'halfyear'){
						this.newDate = +this.oldDate + (180 * 86400000)
					}else if(res[1].data.type === 'year'){
						this.newDate = +this.oldDate + 31104000000
					}
					} else {
						this.newDate = 0
					}
				}).catch( err =>{
					
				})
			
			},
			// getDate(val){
			// 		try {
			// 			if(val){
			// 				switch(val) {
			// 					case 'never':
			// 						this.newDate = 0
			// 						break;
			// 					case 'month':
			// 						this.newDate = this.oldDate + 2592000000
			// 						break;
			// 					case 'halfyear':
			// 						this.newDate = this.oldDate + 180 * 86400000
			// 						break;
			// 					case 'year':
			// 					    this.newDate = this.oldDate + 31104000000
			// 						break;
			// 				}
			// 			}else{
			// 				this.newDate = 0
			// 			}
			// 		} catch (e) {
			// 		    // error
			// 		}
			// 	}
		},
		onLoad(){
			// uni.$on('periodic', this.getDate);
			uni.getSystemInfo({
			    success:(res) =>{
					this.windowHeight = res.windowHeight
			    }
			});
		},
		onShow(){
			this.init()
		},
		onUnload(){
			// uni.$off('periodic', this.getDate);
				},
	}
</script>

<style lang="scss" scoped>
.health-hut {
  background-color: #ffffff;
}
.top-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  background-color: #5e98e7;
  box-sizing: border-box;
  padding: 0 40rpx;
  line-height: 50px;
  .image {
    width: 48rpx;
    height: 48rpx;
  }
  .right {
    width: 28rpx;
    height: 28rpx;
  }
  .text {
    flex: 1;
    font-size: 24rpx;
    margin-left: 20rpx;
    color: #ffffff;
  }
}

.content {
  padding: 16px 40rpx;
  background-color: #ffffff;
  .box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 28rpx;
    color: #555555;
    border-bottom: 1px solid #e8e2e2;
    padding: 16px 20rpx;
    box-sizing: border-box;
  }
  .image {
    width: 50rpx;
    height: 60rpx;
  }
  .text {
    flex: 1;
    margin-left: 20rpx;
  }
  .right {
    color: #cac7c7 !important;
    width: 48rpx;
    height: 48rpx;
  }
  .msg {
    .title {
      font-size: 28rpx;
      color: #555555;
      margin-bottom: 10px;
      margin-top: 20px;
    }

    .center {
      color: #999999;
      font-size: 28rpx;
    }
  }
}

</style>
